<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<u-icon name="arrow-left" class="back" @click="returns"></u-icon>
			</view>
			<view class="bodydiv" :class="{ selectCar: selectedItems.length}">
				<!--  -->
				<view class="call-warpper">
					<view class="top">
						<view class="name">
							{{ language.Takingataxi.callText }}
							<image src='@/static/icon/loading.png' class="loading"></image>
						</view>
						<u-button class="cancel-other"
							@click="cancelOrder">{{ language.Takingataxi.cancelOrderBtnText }}</u-button>
					</view>
					<view class="box-shadow">
						<view class="wait-info">
							<view class="time">
								<text>3</text>{{ language.Takingataxi.waitTimeText }}
							</view>
							<view>{{ language.Takingataxi.predictWaitTimeText }}</view>
						</view>
						<view class="bottom">
							<view class="car-img">
								<!-- 								<u-icon class="oneImg" :name="carItemImg" size="31"></u-icon>
								<view class="text">
									{{ language.Takingataxi.selectCarTypeText1 }}{{ selectedItems.length }}{{ language.Takingataxi.selectCarTypeText2 }}
								</view> -->
							</view>
							<view class="anticipated-price">
								<view style="margin-right: 8rpx;">
									{{ language.Takingataxi.predictText}}{{ orderInfo.cost }}{{ language.Takingataxi.currencyText }}
								</view>
								<u-icon name="arrow-right" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 其他打车类型 -->
				<!-- <view class="add-car">
					<view class="left">
						{{ language.Takingataxi.addCarTypeText }}
					</view>
					<view class="right">
						<text>{{ language.Takingataxi.checkedAllText }}</text>
						<u-checkbox-group v-model="checkedAll">
							<u-checkbox active-color="#2FD4B8" name="checkedAll"
								@change="handleCheckedAll"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<u-checkbox-group v-model="selectedItems" class="warpper">
					<view class="carType-list box-shadow">
						<view class="carItem" v-for="item in carData" :key="item.id">
							<view class="carItem-left">
								<view class="carItem-img">
									<u-icon :name="carItemImg" size="63"></u-icon>
								</view>
								<view class="car-info">
									<view class="car-name" v-if="item.type === 0">
										{{ language.Takingataxi.discountPriceCarPooling }}
									</view>
									<view class="car-name" v-else-if="item.type === 1">
										{{ language.Takingataxi.ddExpress }}
									</view>
									<view class="car-name" v-else-if="item.type === 2">
										{{ language.Takingataxi.fastRide }}
									</view>
									<view class="car-name" v-else-if="item.type === 3">
										{{ language.Takingataxi.SpecialExpress }}
									</view>
									<view class="car-wait-time">
										{{ language.Takingataxi.predictWaitText }}4{{ language.Takingataxi.minute }}
									</view>
								</view>
							</view>
							<view class="carItem-right">
								<view class="price-box">
									{{ language.Takingataxi.estimateText }}<text class="price">28.92</text>{{ language.Takingataxi.currencyText }}
								</view>
								<u-checkbox active-color="#2FD4B8" @change="checkboxChange($event, item)"
									:name="item.name" :checked="item.checked"></u-checkbox>
							</view>
						</view>
					</view>
				</u-checkbox-group> -->

				<!-- 立即打车 -->
				<!-- <view class="footer" :class="{'showFooter':selectedItems.length }">
					<view class="footer-left">
						<view class="price-box">
							{{ language.Takingataxi.estimateText }}<text class="price">43~59</text>{{ language.Takingataxi.footerCurrency }}
						</view>
						<view class="total">
							{{ language.Takingataxi.inAll }}<text>{{ 22 }}</text>{{ language.Takingataxi.manyCarType }}
						</view>
					</view>
					<u-button class="footer-btn" @click="takeTaxiNow" shape="square">{{ language.Takingataxi.footerAddCarType }}</u-button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import * as driverApi from '@/api/driver.js'
	export default {
		data() {
			return {
				language: {},
				initStartPlace: {
					address: '',
					latitude: '',
					longitude: ''
				},
				showInfoWindow: true,
				carItemImg: require('@/static/image/takingataxiImg.png'),
				checkedAll: [],
				selectedItems: [],
				carData: [{
						id: 'ss',
						name: '1',
						checked: false,
						type: 0
					},
					{
						id: 'sss',
						name: '2',
						checked: false,
						type: 1
					},
					{
						id: 'sssss',
						name: '3',
						checked: false,
						type: 2
					},
					{
						id: 'sssss',
						name: '3',
						checked: false,
						type: 3
					},
				],
				orderId: '',
				orderInfo: {},
				driverId: '',
				intervalId: null
			}
		},
		beforeDestroy() {
			// wssocket.close();
			this.intervalId && clearInterval(this.intervalId)
		},
		onShow: function() {
			this.getlanguagedata();
		},
		onLoad(option) {
			// if (!option.id) {
			// 	uni.navigateBack()
			// }
			this.orderId = option.id
			// this.driverId = option.driverId
			this.getOrderInfo()
			// this.intervalId = setInterval(this.getOrderInfo, 8000)
		},
		mounted() {},
		computed: {
			socketMessage() {
				const val = this.$store.state.wssocket.socketMessage
				return val
			}
		},
		watch: {
			socketMessage:{
				handler:function(val, oldV) {
				if (val?.latitude && this.orderId && !this.driverId) {
					this.getOrderInfo()
				}
				},
				deep:true
			}
		},
		methods: {
			// 获取订单信息
			async getOrderInfo() {
				try {
					const res = await driverApi.getTaxiOrder({
						id: this.orderId
					})
					if (res.code === 0) {
						if (Number(res.data.orderStatus)) {
							this.driverId = res.data.driverId
							console.log(Number(res.data.orderStatus))
							// 已接单
							// this.intervalId && clearInterval(this.intervalId)
							uni.redirectTo({
								url: `/pages/Home/Takingataxi/receivedOrder?id=${this.orderId}&driverId=${this.driverId}`,
							});
						}
						this.orderInfo = res.data
						// // 模拟已结单
						// this.order()
					}
				} catch (error) {
					console.log(error)
				}
			},
			// order() {
			// 	try {
			// 		driverApi.cancelOrder({
			// 			driverId: 332,
			// 			orderId: this.orderId
			// 		}).then(res => {}).catch(error => {});
			// 	} catch (error) {
			// 		console.log(error)
			// 	}
			// },
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e, el) {
				el.checked = e
				// // 当单个复选框变化时，更新 selectedItems 数组
				this.selectedItems = this.carData.filter(item => item.checked).map(item => item.name);
				// // 检查是否全部选中，以更新全选框的状态
				if (this.selectedItems.length === this.carData.length) {
					this.checkedAll = ['checkedAll']
				} else {
					this.checkedAll = []
				}
			},
			// 选中任一checkbox时，由checkbox-group触发
			handleCheckedAll(value) {
				if (value) {
					this.checkedAll = ['checkedAll']
				} else {
					this.checkedAll = []
				}
				// 全选或反选
				this.carData.forEach(item => {
					item.checked = value;
				});
				this.selectedItems = value ? this.carData.map(item => item.name) : [];
			},
			takeTaxiNow() {
				uni.navigateTo({
					url: "/pages/Home/Takingataxi/receivedOrder",
				});
			},
			returns() {
				uni.switchTab({
					url: '/pages/Home/Home'
				})
			},
			// 取消订单
			cancelOrder() {
				uni.navigateTo({
					url: "/pages/Home/Takingataxi/cancelOrder",
				});
			},
		}
	}
</script>

<style scoped>
	.alldiv {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
	}

	.alldiv .headdiv {
		position: relative;
		width: 750rpx;
		height: 524rpx;
		overflow: hidden;
	}

	.alldiv .headdiv .back {
		position: absolute;
		top: 100rpx;
		left: 32rpx;
		z-index: 99;
		font-size: 34rpx;
	}

	.alldiv .bodydiv {
		position: relative;
		padding: 8rpx 32rpx;
		width: 750rpx;
		max-height: calc(100vh - 504rpx);
		border-radius: 20px 20px 0 0;
		background: #ffffff;
		box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
		overflow-y: auto;
	}

	.alldiv .bodydiv.selectCar {
		padding: 8rpx 32rpx 236rpx;
	}

	.alldiv .bodydiv .box-shadow {
		margin: 40rpx 0;
		border-radius: 16px;
		background: #ffffff;
		box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
	}

	.alldiv .bodydiv .call-warpper {
		padding-top: 48rpx;
	}

	.alldiv .bodydiv .call-warpper .top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.alldiv .bodydiv .call-warpper .top .name {
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: bold;
	}

	.alldiv .bodydiv .call-warpper .top .cancel-other {
		width: 104rpx;
		height: 44rpx;
		border-radius: 30rpx;
		border: 1px solid #cccccc;
		font-size: 20rpx;
		line-height: 28rpx;
		color: #999999;
		padding: 0;
	}

	.alldiv .bodydiv .call-warpper .wait-info {
		padding: 40rpx 20rpx 24rpx;
	}

	.alldiv .bodydiv .call-warpper .wait-info .time {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #333333;
		margin-bottom: 6rpx;
		text-align: center;
	}

	.alldiv .bodydiv .call-warpper .wait-info .time text {
		font-size: 48rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #2fd4b8;
	}

	.alldiv .bodydiv .call-warpper .wait-info .time+view {
		text-align: center;
		font-size: 20rpx;
		line-height: 28rpx;
		color: #999999;
	}

	.alldiv .bodydiv .call-warpper .bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 20rpx;
	}

	.alldiv .bodydiv .call-warpper .bottom .car-img {
		position: relative;
		display: flex;
		align-items: center;
	}

	.alldiv .bodydiv .call-warpper .bottom .car-img .oneImg {
		opacity: 0.5;
	}

	.alldiv .bodydiv .call-warpper .bottom .car-img .towImg {
		position: absolute;
		top: 0;
		left: 32rpx;
	}

	.alldiv .bodydiv .call-warpper .bottom .car-img .text {
		font-size: 24rpx;
		line-height: 32rpx;
		color: #666666;
	}

	.alldiv .bodydiv .call-warpper .bottom .anticipated-price {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		line-height: 32rpx;
		color: #999999;
	}

	.alldiv .bodydiv .warpper {
		display: block;
	}

	.alldiv .bodydiv .carItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 32rpx;
	}

	.alldiv .bodydiv .carItem .carItem-left {
		display: flex;
		align-items: center;
	}

	.alldiv .bodydiv .carItem .carItem-left .car-info .car-name {
		font-weight: 700;
		font-size: 32rpx;
		color: #383838;
		line-height: 44rpx;
	}

	.alldiv .bodydiv .carItem .carItem-left .car-info .car-wait-time {
		font-size: 20rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.alldiv .bodydiv .carItem .carItem-right {
		display: flex;
	}

	.alldiv .bodydiv .carItem .carItem-right .price-box {
		color: #333333;
		font-size: 20rpx;
		line-height: 28rpx;
		margin-right: 24rpx;
	}

	.alldiv .bodydiv .carItem .carItem-right .price-box .price {
		font-size: 36rpx;
		line-height: 36rpx;
		font-weight: bold;
	}

	.alldiv .bodydiv .carItem .carItem-right .call-out {
		border-radius: 15px;
		border: 1px solid #2fd4b8;
		color: #2fd4b8;
		font-size: 20rpx;
		line-height: 28rpx;
		padding: 0;
		width: 84rpx;
		height: 44rpx;
	}

	.alldiv .bodydiv .add-car {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.alldiv .bodydiv .add-car .left {
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: bold;
	}

	.alldiv .bodydiv .add-car .right {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		line-height: 28rpx;
		color: #333333;
	}

	.alldiv .bodydiv .add-car .right text {
		margin-right: 16rpx;
	}

	.alldiv .bodydiv .footer {
		position: fixed;
		left: 0;
		bottom: -236rpx;
		width: 100%;
		height: 236rpx;
		padding: 48rpx 32rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 20px 20px 0px 0px;
		background: #fff;
		text-align: center;
		box-shadow: 0px -3px 6px rgba(5, 48, 7, 0.08);
		transition: all 0.5s;
	}

	.alldiv .bodydiv .footer.showFooter {
		bottom: 0;
	}

	.alldiv .bodydiv .footer .footer-left {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #999999;
		margin-top: 12rpx;
		margin-bottom: 8rpx;
		text-align: left;
	}

	.alldiv .bodydiv .footer .footer-left .price-box {
		font-size: 24rpx;
		line-height: 32rpx;
		color: #666666;
		margin-bottom: 4rpx;
	}

	.alldiv .bodydiv .footer .footer-left .price-box .price {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 32rpx;
		color: #383838;
	}

	.alldiv .bodydiv .footer .footer-btn {
		width: 278rpx;
		height: 88rpx;
		border-radius: 60rpx;
		background: linear-gradient(90deg, #41f087 0%, #2fd4b8 100%);
		box-shadow: 0px -3px 6px rgba(5, 48, 7, 0.08);
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.loading {
		width: 12px;
		height: 12px;
		margin-left: 6px;
		animation: round 2s infinite ease;
	}

	@keyframes round {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>